<template>
  <section class="first">
    <div class="info-title"><span class="icon"></span>首页</div>
    <div class="txContentBox">
      <div style="position: absolute;right: 0;top: 10px;color: red;font-size: 15px;">（说明：默认按一周计算）</div>
      <div class="head">
        <div class="flex flex-w">
          <div class="flex content-top">
            <div class="content-box back1 border-r1">
              <div class="item_n">总设备数</div>
              <div class="num">{{statementCharge.total_num}}</div>
            </div>
            <div class="content-box back2 border-r1">
              <div class="item_n">在线备数</div>
              <div class="num">{{statementCharge.online_num}}</div>
            </div>
            <div class="content-box back3">
              <div class="item_n">在线率</div>
              <div class="num">{{statementCharge.Online_rate}}%</div>
            </div>
          </div>
        </div>
      </div>
      <my-echart :data='data' v-if="data.series[0].data.length" class="firstcharts"/>
  </div>
  </section>
</template>
<script>
import myEchart from 'components/common/myEchart'
import {devicestatistics, devicestatisticslist} from 'api/txEquipment/index'
// import {devicestatistics, getchargeInfoDetail} from 'api/first/index'
import common from 'src/util/common'
export default {
  data () {
    return {
      data: {
        title: {
          textStyle: {
            color: '#234b72'
          },
          text: '',
          left: 'center'
        },
        legend: {
          top: 'bottom',
          data: ['总设备数', '在线设备数'],
          padding: [15, 0, 0, 0]
        },
        tooltip: {
          trigger: 'axis'
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          name: '日期',
          type: 'category',
          boundaryGap: false,
          data: []
        },
        yAxis: {
          name: '设备数量',
          type: 'value'
        },
        series: [
          {
            name: '',
            type: 'line',
            smooth: true,
            itemStyle: {
              normal: {
                label: {
                  show: true // 在每个上面显示当前值
                },
                color: '#4572a7'
                // lineStyle: {
                //   color: '#4572a7'
                // }
              }
            },
            stack: '总设备数',
            data: []
          },
          {
            name: '',
            type: 'line',
            smooth: true,
            itemStyle: {
              normal: {
                label: {
                  show: true // 在每个上面显示当前值
                },
                color: '#aa4643'
                // lineStyle: {
                //   color: '#aa4643'
                // }
              }
            },
            stack: '在线设备数',
            data: []
          }
        ]
      },
      statementCharge: {},
      statementMercant: {}
    }
  },
  created () {
    this.handleClick()
  },
  methods: {
    handleClick () {
      devicestatistics().then(v => {
        v.data.Online_rate = parseInt(common.mul(common.div(v.data.online_num, v.data.total_num), 100))
        this.statementCharge = v.data
      })
      devicestatisticslist().then(v => {
        let obj = this.tip(v.data)
        this.data.title.text = '在线设备情况'
        this.data.xAxis.data = obj.x
        this.data.yAxis.minInterval = ''
        this.data.series[0].data = obj.y1
        this.data.series[0].name = '总设备数'
        this.data.series[1].data = obj.y2
        this.data.series[1].name = '在线设备数'
      })
      // let aaaaa = [
      //   {'total_num': 30, 'online_num': 12, 'date': '2022-05-02'},
      //   {'total_num': 31, 'online_num': 11, 'date': '2022-05-03'},
      //   {'total_num': 32, 'online_num': 13, 'date': '2022-05-04'},
      //   {'total_num': 33, 'online_num': 14, 'date': '2022-05-05'},
      //   {'total_num': 35, 'online_num': 15, 'date': '2022-05-06'},
      //   {'total_num': 31, 'online_num': 17, 'date': '2022-05-07'},
      //   {'total_num': 39, 'online_num': 18, 'date': '2022-05-08'}
      // ]
      // let obj = this.tip(aaaaa)
      // this.data.title.text = '在线设备情况'
      // this.data.xAxis.data = obj.x
      // this.data.yAxis.minInterval = ''
      // this.data.series[0].data = obj.y1
      // this.data.series[0].name = '总设备数'
      // this.data.series[1].data = obj.y2
      // this.data.series[1].name = '在线设备数'
    },
    tip (arr) {
      let x = []
      let y1 = []
      let y2 = []
      arr.forEach(v => {
        x.push(v.date)
        y1.push(Number(v.total_num))
        y2.push(Number(v.online_num))
      })
      return {x, y1, y2}
    }
  },
  components: {
    myEchart
  }
}
</script>
<style lang='less'>
.first {
  .txContentBox{
    position: relative;
    background: #FFFFFF;
    margin: 20px;
  }
  .head {
    padding: 20px;
    .flex-w{flex-wrap: wrap;margin: 0 -10px;}
    .content-top{height: 120px;flex-grow: 1}
    .border-r1{
      border-right: 1px solid #ada3a3;}
    .content-box{
      flex-grow: 1;
      font-weight:bold;
      min-width: 200px;
      padding: 25px 0 25px 25px;
      color: #333;
      /* border-radius: 15px; */
      margin: 0 10px;
      .text{ margin-top: 8px;font-size: 14px;}
    }
    .num{font-size: 26px;
      text-align: center;}
    /* .back1{background: #5996f8;}
    .back2{background: #7bd2ef;}
    .back3{background: #68dec9;}
    .back4{background: #eabd5c;} */
    .imgNane{width: 30px;height: 30px;padding-right: 10px;}
    .item_n{
      text-align: center;
      /* display:flex; */
      font-weight: 500;
      padding-bottom: 20px;
    }
  }
  .color_r {
    color: red;
  }
  .firstcharts{
    margin: 20px;
    background: #ffffff;
    padding-bottom:20px;
    min-width: 1020px;
  }
}
</style>
